<template>
<div class="contene">
    <myNavbar title="我的邀请的会员"></myNavbar>
    	<div class="coupon_choose">
		<div class="coupon_choose-list" @click="swichNav">
			<text :class="[currentTab==0?'coupon_choose_title':'coupon_choose_title_no']">潜在客户</text>
			<text :class="[currentTab==0?'coupon_choose_line_no':'']"></text>
		</div>
		<div class="coupon_choose-list"  @click="swichNavagin">
			<text  :class="[currentTab==1?'coupon_choose_title':'coupon_choose_title_no']">成交客户</text>
			<text :class="[currentTab==1?'coupon_choose_line_no':'']"></text>
		</div>
	</div>
    	<div  class="swiper-item-box" v-if="currentTab==0">

           <list>
              <cell>
	               <div class="detailed-box-content" v-for="item in memberlists" >
					       	<div class="detailed-box-content_app">
						      	<div class="detailed-title_app">
							      	<image  :src="item.avatar" class="mine-list-item-headImage" ></image>
								          <div class="detailed-title">
								          	<text class="detailed-name">{{item.name}}</text>
									          <text class="detailed-date">{{item.createDate}}</text>
							          	</div>
					        		</div>
						            	<div class="price-content">
							            	<div style="display:flex;align-items: flex-end;justify-content: flex-end;">
									             <text class="price">VIP{{item.vip}}</text>
							           	</div>
							            </div>
					         </div>
					        </div>
                 </cell>
                      <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'" class="loading">
                         <text class="indicator-text">Loading ...</text>
                        <loading-indicator></loading-indicator>
                      </loading>
              </list>

			</div>
	     <div  class="swiper-item-box" v-if="currentTab==1">

                <list>
                    <cell>
					                <div class="detailed-box-content" v-for="item in memberlists" >
						                <div class="detailed-box-content_app">
							                <div class="detailed-title_app">
								                <image  :src="item.avatar" class="mine-list-item-headImage" ></image>
								                <div class="detailed-title">
									                <text class="detailed-name">{{item.name}}</text>
									                <text class="detailed-date">{{item.createDate}}</text>
								                </div>
							                </div>
							                <div class="price-content">
								                <div style="display:flex;align-items: flex-end;justify-content: flex-end;">
									                <text class="price">VIP{{item.vip}}</text>
								                </div>
							                </div>
						                </div>
					                </div>
                     </cell>
                            <loading @loading="onloading" :display="loadinging ? 'show' : 'hide'" class="loading">
                            <text class="indicator-text">Loading ...</text>
                            <loading-indicator></loading-indicator>
                          </loading>
                    </list>

		 </div>
			<div class="coupon-none"  v-if="memberlists.length<1">
				<image class="coupon-none-image" src="http://cdn.rzico.com/v4.0/footprint-none.png"></image>
				<div class="coupon-none-text">暂无邀请会员</div>
			</div>
            
</div>
</template>
<script>
import {memberList} from '../../../api/member'
import myNavbar from '../../../components/myNavbar/myNavbar.vue'
 export default({
   components: {
      myNavbar
    },
     data () {
         return {
                 currentTab: 0,
                 memberlists:[],
                 pageSize:20,
                 pageNum:1,
                 loadinging:false
                 
         }
     },
     created () {
       this.memberListclick()  
     },
     methods: {
    onloading(event) {
      console.log("揍你");
      this.loadinging = true
      setTimeout(() => {
        this.loadinging = false
        this.pageNum += 1
        this.memberListclick()
      }, 1000)
    },
     memberListclick(){
         this.memberlists=[]
        memberList({pageSize:this.pageSize,pageNum:this.pageNum,status:this.currentTab}).then(res=>{
            res.data.data.forEach(item=>{
               if(!this.isNull(item.avatar)){
                 item.avatar=this.thumbnail(item.avatar,100,100)
               }else{
                   item.avatar='http://cdnx.hulu.fj.cn/00/00/rBD_P13JAWCASx16AAAbC4KUH28426.png'
               }
               item.createDate=this.formatTime(item.createDate) 
               this.memberlists.push(item) 
             })
                //  this.memberlists=res.data.data
             })
         },
         swichNav(){
             this.currentTab=0
             this.memberListclick()
         },
         swichNavagin(){
             this.currentTab=1
                         this.memberListclick()
         },
     }
 })
</script>
 <style>
 .contene {
  flex: 1;
     background-color: rgba(248, 248, 248, 0.8);
}
 .coupon_choose {
  /* position: fixed; */
  width: 750px;
  text-align: center;
  line-height: 80px;
  padding-left: 26px;
  padding-right: 26px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 76px;
  background: rgba(248,248,248,1);
}
.coupon_choose-list {
  width: 300px;
  height: 70px;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
}
.coupon_choose_title {
  font-size: 32px;
  font-weight: 500;
  padding-bottom: 5px;
  color: rgba(215, 38, 28, 1);
  margin-bottom: 5px;

}
.coupon_choose_title_no {
  font-size: 28px;
  font-weight: 500;
  padding-bottom: 5px;
  color: rgba(102, 102, 102, 1);
}
.coupon_choose_line {
  width: 34px;
  height: 6px;
}
.coupon_choose_line_no {
    background-color: rgb(231, 91, 83);
    height: 2px;
    width: 50px;
}
.detailed-content {
  padding-top: 20px;
  padding-right: 20px;
  margin-top: 20px;
  /* background-color: cornflowerblue; */
  /* background-color: white; */
  overflow-y: auto;
}
.detailed-title-content {
  width: 710px;
  height: 50px;
  padding-left: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* background-color: brown; */
  /* margin-bottom: 40px; */
}
.detailed-box-content {
  width: 710px;
  background-color:#fff;
  margin-left: 20px;
  /* margin-top: 50px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 180px;
  border-bottom-width: 2px;
  border-bottom-color: #E6E6E6;
  border-bottom-style: solid;
   box-sizing: border-box;
   border-radius: 16px;
}

.vertical {
  margin-right:10px;
  height: 30px;
  width: 10px;
  background-color: #FFD39B;
  /* background: linear-gradient(to bottom, #FFFFF0, #FFD39B); */
}
.detailed-box-content_app{
    /* width: 700px; */
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    /* align-items: center; */
}
.detailed-title_app{
    display: flex;
    width: 500px;
    flex-direction: row;
 
}
.detailed-title {
  margin-left: 20px;
  width: 300px;
  height: 140px;
  display: flex;
  flex-direction: column;
  /* height: 80px; */
  justify-content: space-between;
 /* background-color:seagreen */
}

.price-content{
    width: 100px;

}
.detailed-name {
  font-size: 28px;
  margin-top: 10px;
}
.detailed-date{
    font-size: 28px;
  margin-bottom: 10px;
}
    .mine-list-item-headImage {
        maring-top:10px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        overflow: hidden;
        display: block;
        border-style: solid;
        border-width: 2px;
        border-color: #fff;
        margin-left: 10px;
    }
    .price{
  font-size: 27px;
  color: coral;
}
.coupon-none{
    width: 750px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.coupon-none-image {
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 196px;
  height:131px;
}
.coupon-none-text {
  text-align: center;
  letter-spacing: 5px;
  font-size: 28px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(26, 26, 30, 1);
  line-height: 42px;
  opacity: 0.3;
  margin-top: 30px;
}
    .loading {
        width: 750px;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 22px;
        text-align: center;
		padding-top: 20px;
    }

</style>
